<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuetify Subcomponents Example</title>
    <!-- 引入Vuetify CSS -->
    <link href="static_base/vuetify2.6.4.min.css" rel="stylesheet">
    <!-- 引入Material Design Icons -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <!-- 引入Vue和Vuetify JS -->
    <script src="static_base/vue2.6.14.js"></script>
    <script src="static_base/vuetify2.6.4.js"></script>
    <script type="text/javascript" src="static_base\base.js"></script>
    <script type="text/javascript" src="static_base\base_vue_template.js"></script>
</head>
<body>
    <div id="app">
        <data-table-component></data-table-component>
    </div>

    <script>
        // 创建Vuetify实例
        const vuetify = new Vuetify();

        // 定义数据表组件
        Vue.component('data-table-component', {
            template: `
                <v-container>
                    <v-data-table
                        :headers="headers"
                        :items="items"
                        :items-per-page="5"
                        class="elevation-1"
                    >
                        <template v-slot:item.image="{ item }">
                            <v-img :src="item.image" width="50" height="50"></v-img>
                        </template>
                    </v-data-table>
                </v-container>
            `,
            data: () => ({
                headers: [
                    { text: '日期', value: 'date' },
                    { text: '名称', value: 'name' },
                    { text: '图片', value: 'image' },
                    { text: '数量', value: 'quantity' }
                ],
                items: [
                    { date: '2023-09-27', name: 'Item 1', image: 'https://via.placeholder.com/50', quantity: 10 },
                    { date: '2023-09-28', name: 'Item 2', image: 'https://via.placeholder.com/50', quantity: 20 },
                    { date: '2023-09-29', name: 'Item 3', image: 'https://via.placeholder.com/50', quantity: 30 },
                    { date: '2023-09-30', name: 'Item 4', image: 'https://via.placeholder.com/50', quantity: 40 }
                ]
            })
        });

        // 创建Vue实例
        new Vue({
            el: '#app',
            vuetify,
        });
    </script>
</body>
</html>
